<template>
    <div>
        <!-- 编辑按钮 -->
        <el-button @click="editName">编辑物流名称</el-button>

        <!-- 编辑对话框 -->
        <el-dialog title="编辑物流名称" :visible.sync="dialogFormVisible" width='1000px'>
            <!-- 一行两列显示 -->
            <el-row :gutter='50'>
                <!-- 系统物流名称模块 -->
                <el-col :span='12'>
                    <el-form :model="form">
                        <el-form-item>
                            <!-- 标题 -->
                            <h1 style="fontSize=14px">系统物流名称：</h1>
                            <!-- 主体 -->
                            <div class="main">
                                <!-- 头部搜索模块 -->
                                <div class="header">
                                    物流名称：<el-input v-model="searchName" placeholder='请输入物流名称'></el-input>
                                    <el-button type="primary" @click="search">搜索</el-button>
                                    <el-button @click="clear">重置</el-button>
                                </div>
                                <!-- 列表区域 -->
                                <div class="footer">
                                    <ul>
                                        <li v-for="formItem in searchNameData" :key=formItem.id v-show='formItem.show'>
                                            {{formItem.name}}
                                            <a href="#" @click="addToList(formItem)">添加</a>
                                        </li>
                                        <li v-for="(formItem,index) in searchNameData" :key=index v-show='!formItem.show' style="opacity: 0.2">
                                            {{formItem.name}}
                                            <a href="#" >已添加</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-col>
                <!-- 工厂已配物流模块 -->
                <el-col :span='12'>
                    <el-form :model="form">
                        <el-form-item>
                            <!-- 标题 -->
                            <h1 style="fontSize=14px">工厂已配物流名称：</h1>
                            <!-- 主体 -->
                            <div class="aside">
                                <!-- 标签 -->
                                <el-tag
                                v-for="(yipei,index) in form.yipeiwuliu"
                                :key="yipei.id"
                                closable
                                @close='handleClose(index)'
                                type="success">
                                {{yipei}}
                                </el-tag>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name:'msgBox',
    data(){
        return {
            form:{
                // 系统物流名称
                wuliu:[{id:'001',name:"无忧简易-莆田仓1",show:true},{id:'002',name:"无忧简易-莆田仓2",show:true},{id:'003',name:"无忧简易-莆田仓3",show:true},{id:'004',name:"无忧简易-莆田仓4",show:true},],
                // 工厂已配物流名称
                yipeiwuliu:[]
            },
            // 对话框显示关闭
            dialogFormVisible:false,
            // 对话框输入内容
            searchName:'',
            // 页面展示的数据
            searchNameData:'',
        }
    },
    watch:{
        // 监视searchNameData，为空时进行赋值，默认展示原始四个数据
        searchNameData:{
            immediate: true,
            handler(newVal) {
            if(newVal.length == 0) {
                this.searchNameData = this.form.wuliu
            }
        },
        }
    },
    methods: {
        // 查询输入框输入的内容
        search(){
                // 根据wuliu中的对象的name进行过滤，筛选与输入框中输入的value有相同关键字的对象并返回新数组
                this.searchNameData = this.form.wuliu.filter(item =>{
                    // console.log(item.name.indexOf(this.searchName) !== -1)
                     return item.name.indexOf(this.searchName) !== -1
                })
        },
        // 重置数组为空，watch检测到为空时，会重新赋值
        clear(){
            this.searchNameData = []
            // 输入框内容重置为空
            this.searchName = ''
        },
        // 弹出对话框
        editName(){
            this.dialogFormVisible = true
        },
        // 添加物流
        addToList(formItem){
            this.$confirm('您确定要添加该物流名称吗', '添加物流名称', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.$message({
                type: 'success',
                message: '添加成功!'
            });
            // console.log(formItem)
            // show为false时将展示的li替换为灰色的li
            formItem.show = ! formItem.show
            // 将选中要添加的物流添加到yipeiwuliu数组中，并使用el-tag展示
            this.form.yipeiwuliu.push(formItem.name)
            console.log(this.form.yipeiwuliu)
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消添加'
            });          
            });
        },
        // 处理删除物流
        handleClose(index){
            this.$confirm('您确定要删除该物流名称吗', '删除物流名称', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
            console.log(index)
            // 通过遍历wuliu，对比wuliu中是否有与yipeiwuliu[index]相同的value并返回
            this.form.wuliu.forEach(item =>{
                if(item.name === this.form.yipeiwuliu[index]){
                    // 将显示的灰色改为原来的
                    item.show = true
                    // 删除对应index的值
                    this.form.yipeiwuliu.splice(index,1)
                }
            })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消添加'
            });          
            });
        },
    },
}
</script>

<style>
    a { 
        float: right;
        text-decoration: none;
    }
    ul {
        margin: 0;
        padding: 0;
        list-style: none;

    }
    h1 {
        font-size: 14px;
    }
    .el-input {
        width: 200px !important;
        margin-right: 10px;
    }
    .main{
        width: 430px;
        height: 200px;
        padding: 10px;
        border: 2px solid #eee;
    }
    .aside {
        width: 430px;
        height: 220px;
        border: 2px solid #eee;
    }
    .el-tag {
        margin: 2px;
    }

</style>